<template>
	<view class="root-view cate-wrap">
		<view class="u-menu-wrap">
			<view class="page-view" >
				<view class="cate-mod">
					<view class="cate-mhead">
						<u-divider>设备列表</u-divider>
					</view>
					<view class="cate-mbody">
						<view v-if="!deviceList.length">
							<home-empty></home-empty>
						</view>
						<view class="duc-view" v-else>
							<view class="duc-cell" v-for="(item, index) in deviceList" :key="index">
								<view class="duc-item video-item u-row-between" @click="gotoDevice(item)">
									<view class="u-m-b-20" style="align-items: flex-start;">
										<view class="item-title u-line-1 u-margin-top-20 u-flex" >
											<view>{{item.name}} </view>
											<view @click.stop="jump('/pages/device/edit-device',{id:item.id,name:item.name})" class="u-m-l-10"><u-icon name="edit-pen"></u-icon></view>
										</view>
										<view class="item-text">设备型号：{{item.shebei.xinghao}}</view>
										<view class="item-text">设备编号：{{item.device_id}}</view>
										<view class="item-text">MAC地址：{{item.shebei.mac}}</view>
									</view>
									<view class="u-flex-col u-row-between" style="align-items: flex-end;">
										<view>
											<u-tag text="正常" type="success" mode="plain" size="mini" v-if="item.pipe_status == '正常'"/>
											<u-tag text="异常" type="warning" mode="plain" size="mini" v-else/>
										</view>
									</view>
									<!-- <view class="item-text">检测地块:{{item.equipment.project_name}}</view> -->
								</view>
								<view class="u-flex">
									<view class="u-flex-1 u-p-10">
										<u-button type="success" size="medium" @click="jump('/pages/index/charts',{device_no:item.device_id})">数据查看</u-button>
									</view>
									<view class="u-flex-1 u-p-10">
										<u-button type="error" size="medium" @click="delDevice(item)">解绑</u-button>
									</view>
									<view class="u-flex-1 u-p-10">
										<u-button type="warning" :custom-style='{width:"180rpx"}' size="medium" @click="jump('/pages/device/bluetooth',{id:item.id,device_id:item.shebei.mac})" v-if="!item.shebei.is_nb_bind">重新配网</u-button>
									</view>
									
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- fab -->
		<view class="cate-fab">
			<view class="fab-item" hover-class="coco-opacity" @click="netShow = true">
				<u-icon name="plus"></u-icon>
			</view>
		</view>
		<!-- /fab -->
		<!-- 登录提示 -->
		<shopro-auth-modal></shopro-auth-modal>
		<u-action-sheet :list="netType" v-model="netShow" @click="netConfirm"></u-action-sheet>
	</view>
</template>

<script>
	import homeEmpty from './index/home-empty.vue';
	import { mapMutations, mapActions, mapState } from 'vuex';
	export default {
		components: {
			homeEmpty
		},
		data() {
			return {
				netShow:false,
				netType:[
					{
						text: 'NB通讯',
						id:1,
					},
					{
						text: 'WIFI配网',
						id:1,
					}
				], 
				deviceList:[],
				scrollTop: 0, //tab标题的滚动条位置
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				itemId: '', // 栏目右边scroll-view用于滚动的id
				menuItemPos: [],
				arr: [],
				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
				timer: null, // 定时器
				category: [],
				goodsStatus: 'loadmore',
				goodsList: [],
				goodsPage: 0,
				category_id: null,
				cateTitle:'摄像头',
			};
		},
		onShow() {
			this.getDeviceList();
		},
		computed: {
			...mapState({
				cuser:({user}) => user.cuser
			})
		},
		methods: {
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			netConfirm(index){
				if(index == 0){
					//打开二维码扫描
					this.scanCode();
				}
				else{
					// this.jump('/pages/device/add-device-step2')
					this.jump('/pages/device/bluetooth')
				}
			},
			scanCode(){
				let that = this;
				uni.scanCode({
					success: function (res) {
						if(res.scanType == 'QR_CODE'){
							let name = 'device_id';
							let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
							let param_url = res.result.substr(res.result.lastIndexOf('?')+1);
							let r = param_url.match(reg);
							if (r != null){
								console.log(r);
								let device_id = unescape(r[2]);
								that.$get("/api/member/nb_bind_equipment",{device_id:device_id}).then(ress => {
									if(ress.code == 1){
										uni.showModal({
											title:"系统提醒",
											content:'绑定成功',
											showCancel:false
										})
									}
								})
							}
						}
						else{
							uni.showModal({
								title:"系统提醒",
								content:'条码类型是：'+res.scanType+',暂时不支持此条码',
								showCancel:false
							})
						}
					}
				});
			},
			gotoDevice(item){
				uni.setStorageSync("device_id",item.device_id);
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			handlePlus(){
				//TODO::这个地方暂时跳转，正常是先扫码，成功后带着扫码的设备号，到绑定页面
				let that = this;
				uni.scanCode({
					success: function (res) {
						console.log(res);
						if(res.scanType == 'QR_CODE'){
							let name = 'id';
							let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
							let param_url = res.result.substr(res.result.lastIndexOf('?')+1);
							let r = param_url.match(reg);
							console.log('r', r);
							if (r != null){
								let id = unescape(r[2]);
								console.log(id)
								that.jump('/pages/device/bind-add',{sn:id});
							}else{
								that.$u.toast('扫码失败002，请检查二维码');
							}
						}else{
							that.$u.toast('扫码失败001，请检查二维码');
						}
					}
				});
				
				// this.jump('/pages/device/bind-add',{sn:'2232'});
			},
			scrollToLower(){
				this.getGoodsList();
			},
			getCategory(){
				let params = {};
				// this.$u.api.goodscate(params).then(res => {
				// 	this.category = res.data;
				// });				
				this.$get('/api/coco.api/get_category',{type:'device'}).then(res=>{
					this.category = res.data;
				})
				
			},
			getDeviceList() {
				this.$get("/api/member/get_devices").then(res => {
					if(res.code == 1){
						console.log("res",res);
						this.deviceList = res.data;
					}
				})
			},
			// 点击左边的栏目切换
			async swichMenu(index, category_id) {
				if (category_id == this.category_id) {
					return ;
				} else {
					this.category_id = category_id;
				}
				
				// 如果为0，意味着尚未初始化
				if(this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				// 将菜单菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
				
				this.goodsPage = 0;
				this.getGoodsList();
			},
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + elClass).fields({size: true},res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if(!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return ;
						}
						this[dataVal] = res.height;
					}).exec();
				})
			},
			delDevice(item){
				uni.showModal({
					title:"系统警告",
					content:'确定要解除绑定吗',
					success: (res) => {
						if(res.confirm){
							this.$post("api/member/cancel_bind",{device_id:item.device_id}).then(res => {
								if(res.code == 1){
									this.$u.toast("解绑成功");
									this.getDeviceList();
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" >
	page {
		background-color: #fff;
		height: auto;
	}
	.cate-fab{
		position: fixed;
		right: 24upx;
		bottom: 128upx;
		z-index: 999;
		
		.fab-item{
			width: 80upx;
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #f48124;
			color: #fff;
			border-radius: 100%;
			font-size: 48upx;
			box-shadow: 0 0 0 4rpx rgba($color: #f48124, $alpha: 0.2);
		}
		
		/* #ifdef H5 */
		bottom:232upx;
		/* #endif */
	}
	.cate-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top) - 50px);
		/* #endif */
		display: flex;
		flex-direction: column;
	}
	.u-menu-wrap {
		&::before{
			content: " ";
			position: absolute;
			right: 0;
			top: 0;
			left: 0;
			height: 1px;
			background-color:$u-border-color;
			transform: scaleY(.5);
		}
	}
	.u-tab-view {
		position: relative;
		width: 280rpx;
		min-width: 0;
		height: 100%;
		&::after{			content: " ";			position: absolute;			right: 0;
			top: 0;			bottom: 0;			width: 1px;			background-color:$u-border-color;			transform: scaleX(.5);		}
	}
	
	.u-tab-item {
		height:100rpx;
		// background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #777777;
		font-weight: 400;
		line-height: 1;
	}
	
	.u-tab-item-active {
		position: relative;
		color: #fff;
		font-size: 28rpx;
		
		// &::before {
		// 	content: "";
		// 	position: absolute;
		// 	border-left: 4px solid #ff0030;
		// 	height: 32rpx;
		// 	left: 0;
		// 	top: 50%;
		// 	margin-top: -16rpx;
		// }
		.item-lab{
			position: relative;
			z-index: 10;
		}
		&::after {
			content: " ";
			position: absolute;
			height: 60rpx;
			border-radius: 10upx;
			left: 20upx;
			right: 20upx;
			top: 50%;
			margin-top: -30rpx;
			z-index: 0;
			background-color: #f48124;
			transition: .3s;
		}
	}
	
	.u-tab-view {
		height: 100%;
	}
	
	.right-box {
		flex: 1;
		min-width: 0;
		background-color:#fff;
	}
	
	.page-view {
		padding:30upx;
	}
	
	.cate-mod {
		margin-bottom: 40rpx;
	}
	
	.cate-mod:last-child {
		min-height: 100vh;
	}
	.cate-mhead{
		line-height: 40upx;
		margin-bottom: 20upx;
	}
	.cate-madv{
		margin-bottom: 20upx;
	}
	.cate-mbody{
		
	}
	.duc-view {
		margin-top:10rpx; 
	}
	.duc-cell{
		// position: relative;
		margin-bottom: 28upx;
	}
	.duc-item{
		// position: relative;
		padding:24upx 24upx;
		display: flex;
		// align-items: center;
		background-color: #f9f9f9;
		border-radius: 10upx;
		.item-head{
			margin-left: 20upx;
		}
		.item-body{
			flex: 1;
			min-width: 0;
		}
		.item-title{
			font-size: 30upx;
			font-weight: 500;
			margin-bottom:12upx;
			line-height: 36upx;
		}
		.item-text{
			font-size: 24upx;
			color: #999;
			line-height: 36upx;
		}
	}
	.video-item{
		// align-items: center;
		padding-bottom: 0;
	}
</style>
